<template>
  <div class="search-box">
    <el-input
        class="search-input"
        placeholder="搜索文章、疾病、医生、药品或医院..."
        v-model="searchQuery"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import { useRouter } from 'vue-router'; // 导入 vue-router

const searchQuery = ref('');
const router = useRouter(); // 创建路由实例

const handleSearch = () => {
  if (searchQuery.value=== '') { // 判断搜索内容是否为空
    router.push('/empty-search'); // 跳转到指定的界面（例如：空搜索结果页）
    return;
  }
  else {
    router.push({path:'/pay-ask-doctor',query:{data:searchQuery.value}})
  }

  console.log('搜索内容:', searchQuery.value);
  // 这里可以添加实际的搜索逻辑，例如跳转到搜索结果页面
};
</script>

<style scoped>
.search-box {
  display: flex;
  justify-content: center;
  padding-top: 20px; /* 根据需要调整上边距 */
}

.search-input {
  width: 70%; /* 将搜索框宽度增大到70% */
  height: 60px; /* 设置搜索框高度，增加到60px */
  padding: 12px; /* 增加内边距 */
  font-size: 1.2rem; /* 增加字体大小 */
}
</style>
